<template>
	<section>
		<div class="send-main">
            <div class="send-address" @click.stop = "setAddress">
              <div class="person"><b class="dingwei"></b>
			  <template v-if="info.deliveryInfo.receiverMobile">
                <h5 style="color:#444;font-size:.56rem">
					{{userInfo.userName || info.deliveryInfo.receiverName}}/{{(userInfo.phone || info.deliveryInfo.receiverMobile) | phoneCoded}}
				</h5>
                <h5 style="color:#999;font-size:.48rem;margin-left: 1.2rem;">
						{{userInfo.provName ||info.deliveryInfo.provinceName}}{{userInfo.cityName ||info.deliveryInfo.cityName}}{{userInfo.distName ||info.deliveryInfo.districtName}}{{userInfo.townName}}{{userInfo.poiName ||info.deliveryInfo.interestPointName}}{{userInfo.pathName ||info.deliveryInfo.detailAddress}}{{userInfo.houseNumber}}
					<!--江苏南京市玄武区全区苏宁易购总部一街区 一栋 一单元 1111室   12312-->
				</h5>
				</template>
				<h5 v-else style="color:#999;font-size:.48rem;margin-left: 1.2rem;">
					请选择地址
				</h5>
				<i></i>
              </div>
            </div>
            <div style="position:relative" class="send-time">

			<template v-if="info.deliveryInfo.canPickUp==1&&this.$store.state.cart2.stationList.length>0">
				<p style="position: relative;" class="clock-bg">
					<span>门店自提</span>
					<em class="ask-mask" @click="showPickupProcess = true">?</em>

					<em style="float: right;">
						<input type="checkbox" class="weui-switch" v-model="checkedPick">
					</em>

				</p>
			</template>
			<!--自提信息-->
			 <template v-if="checkedPick">
				<p class="clock-bg select-box t-address select-icon">
					<span class="fl">自提地址</span>
					<span class="fr"><em>{{stationAddressName}}</em></span>
					<popup-picker class="select-btn" title="" :data="stationList.address"  @on-change="selAddress"></popup-picker>
				</p>

				<p class="clock-bg select-box t-times select-icon" @click="showPickerTimes = true">
					<!--<em class="fr">{{stationTimeName}}</em>-->
					<input class="fr" type="text" placeholder="请选择自提时间" :value="stationTimeName" readonly>
					自提时间
					<popup-picker class="select-btn" :show="showPickerTimes" :show-cell="false" title="times" :data="stationTimeList" :columns="1" v-model="pickerTimesValue" @on-change="selTime" @on-hide="showPickerTimes=false"></popup-picker>
				</p>
				
				<p class="clock-bg" style="margin-bottom:.4rem;">联系电话 <em class="fr">{{stationTel}}</em></p>
			 </template>
			 <!--<p v-else class="clock-bg select-box select-icon">
				<popup-picker v-if="!checkedPick&&info.deliveryValue.length" class="delivery-time" title="送达时间" :data="info.deliveryList" :columns="1" v-model="deliveryValue" ref="picker" @on-change="deliveryTime" show-name>
				  <i></i>
			  	</popup-picker>
			</p>-->

			<p v-else class="clock-bg select-box t-times select-icon" @click="showPickerDate = true">
				<!--<em class="fr">{{stationTimeName}}</em>-->
				<input class="fr" type="text" placeholder="请选择送达时间" :value="deliveryName" readonly>
				送达时间
				<popup-picker class="select-btn" :show="showPickerDate" :show-cell="false" title="times" :data="info.deliveryList" :columns="1" @on-change="deliveryTime" @on-hide="showPickerDate=false"></popup-picker>
			</p>

              
			  <!--{{$refs.picker&&$refs.picker.getNameValues()}}-->

              <p class="clock-bg">
				  <em class="fr">苏宁支付</em>
			  	  支付方式
				  <span class="act-tag" v-if="info.cartHeadBasicInfo.activityMsg" v-text="info.cartHeadBasicInfo.activityMsg"></span>
			  </p>
               <router-link to="/cart2conpon">
					<p class="clock-bg J-toquanpage select-icon">优惠券 <em class="curtimegrey" style="float: right;margin-right: .2rem;" v-html="volumeinfo"></em></p>
			   </router-link>

              <p class="clock-bg" style="display: none;">发票信息 <a href="./fapiao.html"><span style="float: right;margin-right: .2rem;color:#444" class="curtimegrey">不开发票</span></a><i></i></p>
              <p class="clock-bg sp-height">备注
                <textarea v-bind:placeholder="info.cartHeadBasicInfo.commentTips" maxlength="30" id="memojson" v-model="remarks"></textarea>
              </p>
            </div>
            <div class="buy-list">
            	<p class="clock-bg">购物清单 </p>

				<p v-for="item in info.cmmdtyInfoItems" class="goods-list gift">
					<span class="good-name">{{item.cmmdtyName}} </span>
					<em style="margin-left:15px;">&yen;{{item.salesPrice | formatPrice}} <b></b></em>
					<span class="num">&times; {{item.cmmdtyQty}}</span>
				</p>

				<p class="gift"><span class="good-name">商品总额</span><span style="width:auto;color:#f5a623" class="num">&yen; {{info.cartHeadBasicInfo.totalAmount | formatPrice}}</span></p>
				<p style="position:relative" class="gift">
					<span class="good-name">配送费</span>
					<em class="ask-mask" @click="deliveryPrice">?</em>
					<span v-if="checkedPick" style="width:auto;color:#f5a623" class="num">&yen; 0.00</span>
					<span v-else style="width:auto;color:#f5a623" class="num">&yen; {{info.cartHeadBasicInfo.transportFee | formatPrice}}</span>
				</p>
				<p class="gift">
					<span class="good-name">优惠券</span>
					<span style="width:auto;color:#f5a623" class="num">
					<span v-if="parseInt(info.cartHeadBasicInfo.couponAmount) > 0">-</span>
					&yen; {{info.cartHeadBasicInfo.couponAmount | formatPrice}}</span>
				</p>
				<p class="gift">
					<span class="good-name">订单优惠</span>
					<span style="width:auto;color:#f5a623" class="num">
					<span v-if="parseInt(info.cartHeadBasicInfo.totalFreight) > 0">-</span>
					&yen; {{info.cartHeadBasicInfo.totalFreight | formatPrice}}</span>
				</p>
            </div>

        </div>
		<div class="xiadan">
			  	<em>
					合计：
					<strong v-if="checkedPick">&yen;{{info.cartHeadBasicInfo.pickUpPayAmount | formatPrice}}</strong>
					<strong v-else>&yen;{{info.cartHeadBasicInfo.payAmount | formatPrice}}</strong>
				</em>
				<p>(
					<span>优惠已减 &yen;{{info.cartHeadBasicInfo.couponAmount | formatPrice}}</span>
					<!-- <span v-if="!checkedPick && parseFloat(info.cartHeadBasicInfo.transportFee)>0">含运费 &yen;{{info.cartHeadBasicInfo.transportFee | formatPrice}}</span>
					<span v-else>含运费 &yen;0.00</span> -->
					)
				</p>
            	<button @click="goPay({ type: flag, time: deliveryValue, remarks: remarks, isPickUp: checkedPick, pickUpInfo:{pickUpId:pickUpId, pickUpAddress: stationAddressName, pickUpDate:stationTimeName, pickUpTel:stationTel,}})">去付款</button>
        </div>

		<cart-validation-failed v-if="invalidItems && invalidItems.length" :cmmdty-info-items="info.cmmdtyInfoItems" :invalid-items="invalidItems" :cart-step="2"></cart-validation-failed>

		<!-- 自提流程图 -->
		<div class="pickup-process" v-show="showPickupProcess">
			<div class="image">
				<i @click="showPickupProcess = false"></i><span></span>
			</div>
		</div>
	</section>
</template>

<script>
	import { PopupPicker, TransferDomDirective as TransferDom } from 'vux'
	import { mapGetters, mapActions } from 'vuex'
	import '../../style/weui-switch.scss'
	import router from '@/router/index'
	import cartValidationFailed from '../common/cartValidationFailed'

	export default {
		name: 'cart',
		directives: {
			TransferDom
		},
		data(){
			return {
				show: false,
				tebshow: 0,
				// 一小时达时间选择显示时间
				deliveryName: '',
				// 一小时达时间选择实际时间
				deliveryValue: [],
				time: '',
				remarks: '',
				flag: '0',
				checkedPick: false,
				showPickupProcess: false,
				// 自提点显示名称
				stationAddressName: [],
				// 自提时间显示名称
				stationTimeName:'',
				// 自提时间
				stationTimeList: [],
				// 自提电话
				stationTel: '',
				// 自提点ID
				pickUpId: '',

				showPickerDate: false,

				showPickerTimes : false,

				pickerTimesValue:[]
			}
		},
		components: {
			PopupPicker, cartValidationFailed
		},
		created(){
			this.$store.commit('showMask', true)
		},
		mounted (){
			// 判断是否从优惠券进去的
			if(!this.$store.state.cart2.fromCoupon){
				this.$store.dispatch('setAddress')
			}else{
				this.$store.commit('updateFromCoupon', false)
			}
		},
		methods: {
			...mapActions([
				'goPay'
			])

			,deliveryPrice(){
				//router.push('/orders')
				AlertBox({
					type:'onceConfirm',
					msg: this.info.shopInfo.shopDeliveryFeeRule,
					confirmText:'我知道了'
				})
				//alert(this.info.shopInfo.shopDeliveryFeeRule)
			}
			,pickerChanges(value){
				debugger
			}
			// 普通商品选择时间回调 value返回['2017-09-01', '{父元素下标}-{子元素下标}']
			,deliveryTime(value){
				let parentIndex = value[1].split('-')[0]
				let childIndex = value[1].split('-')[1]

				let parentDate = this.$store.state.cart2.cart2Info.arrivalTimeInfos[parentIndex]
				let childData = this.$store.state.cart2.cart2Info.arrivalTimeInfos[parentIndex].selectTimes[childIndex]
				
				if(childData.flag==0){
					this.deliveryName = '一小时达'
				}else{
					this.deliveryName = parentDate.date+' '+parentDate.desc+' '+childData.time
				}
				this.deliveryValue =  [parentDate.date, childData.time]
				this.flag = childData.flag;

			}
			,setAddress () {
				// ···判断商品类型
				this.$router.push(`/cartAddress?cartLink=/cart2`)
			}
			/*
			*setFlag：此方法判断当前选择时间是否是1小时达
			*车2去付款时，选择配送时间选择1小时达 selectStrategy传0，预约商品和生鲜预订商品传1
			*车2展示接口arrivalTimeInfos对象中，flag=0为一小时达，1为预约
			*/
			,setFlag(arr){
				let value = arr;
				if(value.length>0){
					let date, time;
					this.$store.state.cart2.cart2Info.arrivalTimeInfos.forEach(x => {
						if (x.date == value[0]) {
							date = x;
						}
					});
					date.selectTimes.forEach(x => {
						if (x.time == value[1]) {
							time = x;
						}
					});
					this.flag = time.flag;
				}
			}

			// 选择完自提地址回调
			,selAddress(value){
				this.stationTimeList = []
				let stationList = this.$store.state.cart2.stationList
				let a = stationList.filter(x => x.stationId==value)[0]
				console.log(a)
				//alert(a)
				// 设置地址名称
				this.stationAddressName = a.stationAddress
				// 设置默认时间数据
				this.stationTimeList = this.formatTimes(a.dateList);
				// 设置地址下默认展示时间
				//this.stationTimeName = a.dateList[0].date + ' ' + a.dateList[0].selectTimes[0]
				this.stationTimeName = ''
				// 设置电话
				this.stationTel = a.stationPhone

				this.pickerTimesValue = [a.dateList[0].date, a.dateList[0].selectTimes[0]]
				
			}

			// 选择自提时间回调
			,selTime(value){
				this.stationTimeName = `${value[0]} ${value[1]}`
			}

			// 将后台返回的时间转化成组件所需格式
			,formatTimes(arr){
				var list = []
				arr.forEach((ov, oi)=>{
					list.push({'name': ov.date, 'value': ov.date, 'parent': 0})
					ov.selectTimes.forEach((tv, ti)=>{
						list.push({'name': tv, 'value': tv, 'parent': ov.date})
					})
				})
				return list
			}
		},
		computed: {
			...mapGetters({
				info: 'cart2Info',
				userInfo: 'userInfo',
				volumeinfo:'volumeinfo',
				station: 'stationList'
			}),
			// 自提点
			stationList(){
				let stationList = this.$store.state.cart2.stationList
				if(!stationList.length)return;
				let list = {
					address: [[]],
				}
				stationList.forEach((ov, oi)=>{
					list.address[0].push({'name': ov.stationAddress, 'value': ov.stationId})
				})

				return list;
			},
			showmask(){
				return this.$store.state.showMask
			},
			invalidItems() {
				return this.$store.state.cart2.invalidItems
			},
		},
		watch: {
			// 小店普通商品配送时间默认设置第一个配送时间
			info (val, oldVal) {
				let parentDate = this.$store.state.cart2.cart2Info.arrivalTimeInfos[0]
				let childData = this.$store.state.cart2.cart2Info.arrivalTimeInfos[0].selectTimes[0]
				
				if(childData.flag==0){
					this.deliveryName = '一小时达'
				}else{
					this.deliveryName = parentDate.date+' '+parentDate.desc+' '+childData.time
				}
				this.deliveryValue =  [parentDate.date, childData.time]
				this.flag = childData.flag;
			},
			// 监听异步获取自提点 设置默认信息
			stationList (val){
				let stationList = this.$store.state.cart2.stationList

				this.stationAddressName = stationList[0].stationAddress
				//this.stationTimeName = stationList[0].dateList[0].date + ' ' + stationList[0].dateList[0].selectTimes[0]
				this.stationTimeName = ''
				this.stationTimeList = this.formatTimes(stationList[0].dateList);
				this.stationTel = stationList[0].stationPhone
				this.pickUpId  = stationList[0].stationId
			}
		}
		
	}
</script>
<style>
 .curtimegrey span{
		color: rgb(255, 120, 45);
}
 .curtimegrey span.enable_volume {
	color: #fff;
	background-color: #7ed320;
}
</style>
<style lang="scss" scoped>

	@function _($px) {
		$rem: $px/50;
		@return #{$rem}rem;
	}
	.send-main {
		width: 15rem;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		height: 100%;
		padding-bottom: 1.96rem;
		box-sizing: border-box;
	}
	.send-address,.send-time,.buy-list {
		position: relative;
		margin: .4rem 0;
	}

	.send-address div,.buy-list div,.send-address p,.send-time p,.buy-list p {
		position: relative;
		padding: 0 .8rem;
		box-sizing: border-box;
		height: 1.76rem;
		line-height: 1.76rem;
		background: #fff;
		background-size: .56rem;
		margin-bottom: .04rem;
		color: #444;
		font-size: .56rem
	}

	.send-address .person,.send-time .person,.buy-list .person {
		min-height: 2.4rem;
		height: auto;
		line-height: .76rem;
		background-image: none;
		padding-left: .8rem;
		padding-top: .44rem;
		box-sizing: border-box;
		font-size: _(24)
	}
	.xiadan {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		border-top: 1px solid #e8e8e8;
		background-color: #fff;
		color: #fff;
		font-size: .72rem;
		text-align: center;
		height: 1.96rem;
		line-height: 1.96rem;
		width: 15rem;
		margin: 0;
		border-radius: 0;
		z-index: 2;
		em{
			position: absolute;
			right: 4.2rem;
			top: 0;
			text-align: right;
			top: 0.2rem;
			height: .72rem;
			line-height: .72rem;
			color: #333;
			font-size: _(26);
			strong{
				height: .72rem;
				display: inline;
				float: right;
				color: #fa0;
				font-weight: normal;
			}
		}
		p{
			position: absolute;
			right: 4.2rem;
			top: .4rem;
			color: #999;
			height: .72rem;
			text-align: right;
			font-size: _(24)
		}
		button{
			width:4rem;
			float:right;
			height:100%;
			margin:0;
			background:#ff782d;
			color:#fff;
			border:none;
			border-radius:0;
			font-weight:400
		}
	}
	.good-name {
		display: inline-block;
		height: 1.76rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: block-axis;
		float: left;
		text-overflow: ellipsis;
	}
	.ask-mask {
		display: inline-block;
		color: #5ecd00 !important;
		left: 2.5rem;
		border-radius: 50%;
		border: 1px solid #5ecd00;
		line-height: 1.2;
		width: .6rem;
		height: .6rem;
		top: 0;
		bottom: 0;
		margin: auto 0;
		margin-left: .2rem;
		box-sizing: border-box;
		text-align: center;
	}
	.send-time .sp-height {
		height: 2.52rem;
		background-position-y: .52rem;
	}
	.send-time textarea {
		float: right;
		height: 2rem;
		width: 10.96rem;
		border: none;
		margin-top: .52rem;
		outline: none;
		resize: none;
	}
	.gift .num {
		float: right;
		line-height: 1.76rem;
	}
	.buy-list .goods-list{
		background-color: #f9f9f9;
		.good-name{
			width: 9rem;
		}
	}
	.dingwei {
		float: left;
		width: .88rem;
		height: .88rem;
		background-image: url();
		margin-left: -.2rem;
		margin-right: .56rem;
		background-size: contain;
	}
	.send-main i {
		position: absolute;
		top: 50%;
		right: 0;
		-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		border-width: 1px 1px 0 0;
		border-color: #C8C8CD;
		border-style: solid;
		margin-top: _(-9);
		height: _(18);
		width:  _(18);
		background-size: contain;
		margin-right: .4rem;
	}
	.send-time span{
		display: inline-block;
	}
	.clock-bg{
		.fr{
			// width: 10rem;
			max-height: 1.76rem;
			overflow: hidden;
			text-align: right;
			float: right;
			margin-right: .2rem;
			color:#444
		}
		.act-tag {
			display: inline-block;
			padding: 0 _(10);
			margin-left: _(10);
			height: _(30);
			line-height: _(30);
			background: #ff782d;
			color: #FFF;
			font-size: _(22);
		}
	}
	.select-icon{
		&:after{
			content: " ";
			display: inline-block;
			position: absolute;
			top: 50%;
			right: 0;
			-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			border-width: 1px 1px 0 0;
			border-color: #C8C8CD;
			border-style: solid;
			margin-top: _(-8);
			height: _(16);
			width:  _(16);
			background-size: contain;
			margin-right: .4rem;
		}
	}
	.send-time .t-address{
		min-height: 1.76rem;
		height: auto;
		overflow: hidden;
		line-height: 0.88rem;
		padding: .5rem .8rem;
		.fl{
			display: inline-block;
			float: left;
			width: 2.3rem;
		}
		.fr{
			max-height: 1.8rem;
			float: right;
			width: 10rem;
			position: relative;
			overflow: hidden;
    		display: inline-block;
			em{
				text-align: right;
				position: relative;
				top: 50%;
				transform: translateY(-50%)
			}
		}
	}
	.send-time .t-times{
		.fr{
			border: none;
			color: #ff782d;
			margin-top: .5rem;
			width: 10rem;
		}
	}
	.curtimegrey {
		color: #999 !important;
	}



	.pickup-process {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		overflow: hidden;
		background-color: rgba(0, 0, 0, .5);
		z-index: 3;
		.image {
			position: absolute;
			left: 50%;
			top: 50%;
			width: _(560);
			height: _(752);
			margin-left: _(-280);
			margin-top: -8.8rem;
			background: url(images/pickup-process.png);
			background-size: contain;
			i {
				position: absolute;
				bottom: _(-130);
				left: _(230);
				width: _(90);
				height: _(90);
				background: url(images/pickup-process-close.png);
				background-size: contain;
			}
			span {
				position: absolute;
				bottom: _(-40);
				left: _(273);
				width: 0;
				height: _(40);
				border-left: dashed 1px #FFF;
			}
		}
	}
</style>
<style lang="scss">
.scroller-item{
	    white-space: nowrap;
}
.send-time .select-box{
	position: relative;
	.select-btn{
		position: absolute;
		right: 0;
		top: 0;
		width: 11rem;
		height: 100%;
		padding: 0;
		background: none;
		margin: 0;
		.weui-cell{
			height: 100%;
		}
		&:before{
			border: none;
		}
	}
}
	.delivery-time{
		.weui-cell{
			padding:0;
			display: block;
			height: 100%;
		}
		.weui-cell__hd{
			float: left;
		}
		&:before{
			display: none;
		}
		.weui-cell_access .weui-cell__ft{

		}
		.weui-cell_access .weui-cell__ft:after{
			position: absolute;
			right: -0.36rem;

			height: 0.36rem;
			width:  0.36rem;
			border-width:1px 1px 0 0;
			margin-top: .7rem;
		}
		.vux-popup-picker-select span{
			padding-right: 0
		}
		.vux-cell-primary{
			float: right;
			flex: inherit;
			margin-right: 0.2rem;
		}
		
	}
	// .vux-popup-dialog{
	// 	width: 10rem;
	// }

	.weui-dialog__ft{
		//display: block!important
	}
	
	.weui-dialog__bd{
		min-height: 0;
	}

</style>

